<script lang="ts" setup name="AsmePersonTrainCourse">
import {
  getListByConditionsWithPage,
  getLoginUserInfo,
  insertOne,
  ndeMethodNameConvertor,
  updateOne,
  urls,
  hasUpdatePermission
} from '@/index';
import type {
  AsmePersonTrainCourse,
  AsmePersonTrainCourseQueryCondition,
  AsmePersonTrainRecord,
  DialogModel
} from '@/index.d';
import { useRequest } from 'vue-request';
import DetailDialog from './DetailDialog.vue';
const title = '美标课程设计';
const queryCondition = reactive<AsmePersonTrainCourseQueryCondition>({
  deleted: false,
  change: false,
  currentPage: 1,
  pageSize: 20
});

const resetQueryCondition = () => {
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  delete queryCondition.method;
  delete queryCondition.level;
};

const getAsmePersonTrainCourseListWithPagePromise = () => {
  return getListByConditionsWithPage<AsmePersonTrainCourse>(
    urls.asmePersonTrainCourse,
    queryCondition
  );
};

const {
  data: getAsmePersonTrainCourseListData,
  run: getAsmePersonTrainCourseListRun,
  loading: getAsmePersonTrainCourseListLoading
} = useRequest(getAsmePersonTrainCourseListWithPagePromise);

const handleResetQuery = () => {
  resetQueryCondition();
  getAsmePersonTrainCourseListRun();
};

const detailDialogModel = reactive<DialogModel<AsmePersonTrainCourse>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

watch(
  () => detailDialogModel.visible,
  (value: boolean) => {
    if (!value && detailDialogModel.change) {
      getAsmePersonTrainCourseListRun();
      detailDialogModel.change = false;
    }
  }
);
const handleChange = async (row: AsmePersonTrainCourse) => {
  const temData: AsmePersonTrainCourse = {
    id: row.id,
    sequence: row.sequence,
    method: row.method,
    level: row.level,
    courseName: row.courseName,
    courseScore: row.courseScore
  };
  await updateOne<AsmePersonTrainCourse>(urls.asmePersonTrainCourse, temData);
  getAsmePersonTrainCourseListRun();
};
const handleNewRow = async () => {
  if (queryCondition.method === undefined) {
    ElMessage.error('请选择搜索栏中的检测方法');
    return;
  }
  const temData: AsmePersonTrainCourse = {
    method: queryCondition.method,
    level: 2,
    courseScore: 2
  };
  const res = await insertOne<AsmePersonTrainCourse>(urls.asmePersonTrainCourse, temData);
  res && getAsmePersonTrainCourseListRun();
};

const handleStartStudy = async (row: AsmePersonTrainCourse) => {
  const temData: AsmePersonTrainRecord = {
    username: getLoginUserInfo().loginUserUsername,
    asmePersonTrainCourseId: row.id
  };
  await insertOne<AsmePersonTrainRecord>(urls.asmePersonTrainRecord, temData);
  getAsmePersonTrainCourseListRun();
};
</script>
<template>
  <HqContainerTable
    :base-url="urls.asmePersonTrainCourse"
    :title="title"
    :loading="getAsmePersonTrainCourseListLoading"
    :total="getAsmePersonTrainCourseListData?.total"
    :table-data="getAsmePersonTrainCourseListData?.records"
    v-model:pageSize="queryCondition.pageSize"
    v-model:current-page="queryCondition.currentPage"
    @handle-query="getAsmePersonTrainCourseListRun"
    @handle-reset-query="handleResetQuery"
    v-model:detail-dialog-model="detailDialogModel"
    :operate-column="true"
    logic-delete
  >
    <template #search>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.method"
          clearable
          placeholder="请选择方法"
          @change="getAsmePersonTrainCourseListRun"
        >
          <HqNdeMethodOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.level"
          clearable
          placeholder="请选择等级"
          @change="getAsmePersonTrainCourseListRun"
        >
          <HqNdeMethodLevelOptions />
        </el-select>
      </hq-col>
    </template>
    <template #button>
      <el-button type="primary" @click="handleNewRow">新增一行</el-button>
    </template>
    <template #tableColumns>
      <hq-table-column label="学习" :min-width="100">
        <template #default="{ row }">
          <el-button @click="handleStartStudy(row)" :disabled="row.isStarted">开始学习</el-button>
        </template>
      </hq-table-column>
      <hq-table-column label="学习进度" :min-width="100">
        <template #default="{ row }">
          <el-progress
            :percentage="row.progress"
            striped
            striped-flow
            :show-text="false"
            :status="row.progress === 100 ? 'success' : ''"
          />
        </template>
      </hq-table-column>
      <el-table-column
        prop="method"
        label="方法"
        :formatter="ndeMethodNameConvertor"
        align="center"
        :min-width="100"
      />
      <hq-table-column label="顺序" :min-width="100">
        <template #default="{ row }">
          <el-input-number
            v-model="row.sequence"
            @change="handleChange(row)"
            :min="1"
            :max="100"
            :readonly="!hasUpdatePermission(title)"
          />
        </template>
      </hq-table-column>
      <hq-table-column label="等级" :min-width="100">
        <template #default="{ row }">
          <el-rate
            :max="3"
            v-model="row.level"
            @change="handleChange(row)"
            :disabled="!hasUpdatePermission(title)"
          />
        </template>
      </hq-table-column>
      <hq-table-column label="课程内容" :min-width="600">
        <template #default="{ row }">
          <el-input
            v-model.trim="row.courseName"
            @change="handleChange(row)"
            :readonly="!hasUpdatePermission(title)"
          />
        </template>
      </hq-table-column>
      <hq-table-column label="学时" :min-width="100">
        <template #default="{ row }">
          <el-input-number
            v-model="row.courseScore"
            @change="handleChange(row)"
            :min="0.5"
            :max="20"
            :step="0.5"
            :readonly="!hasUpdatePermission(title)"
          />
        </template>
      </hq-table-column>
      <hq-table-column label="附件" :min-width="100">
        <template #default="{ row }">
          <el-link v-if="row.attachmentUrl" :href="row.attachmentUrl" target="_blank">
            查看
          </el-link>
        </template>
      </hq-table-column>
    </template>
  </HqContainerTable>
  <DetailDialog v-model:dialog-model="detailDialogModel" v-if="detailDialogModel.visible" />
</template>
<style lang="scss" scoped></style>
